<!-- eslint-disable vue/no-mutating-props -->
<template>
  <!-- <card :showDivider="false"> -->
  <!-- {{ orderDetails }} -->
  <card class="add-info-card" title="作废备注" toggle v-if="orderDetails.deleteFlag == 1">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="作废人">{{ orderDetails.invalidStaffName }}</a-descriptions-item>
          <a-descriptions-item label="作废时间">{{ orderDetails.invalidTime }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="备注">{{ orderDetails.invalidRemark }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="客户信息" toggle>
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="客户类型">{{ orderDetails.memberTypeName }}</a-descriptions-item>
          <a-descriptions-item label="客户公司名称" v-if="orderDetails.memberType == 1">{{ orderDetails.clientName }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{ orderDetails.memberPhone }}</a-descriptions-item>
          <a-descriptions-item label="承租人">
            <span>{{ orderDetails.memberName }}</span>
            <span style="margin-left: 7px">
              <tag
                :type="
                  memberInfoDto?.memberStatus == 1 || memberInfoDto?.memberLabel == 3
                    ? 'danger'
                    : memberInfoDto?.memberLabel == 2
                    ? 'success'
                    : 'primary'
                "
              >
                {{ memberInfoDto?.memberStatus == 1 ? '已拉黑' : memberInfoDto?.memberLabelName }}
              </tag>
            </span>
            <div class="member-name">
              <a-button
                size="mini"
                type="primary"
                style="margin-right: 10px"
                v-if="memberInfoDto && (!memberInfoDto?.driverFrontFileId || !memberInfoDto?.driverReverseFileId)"
                @click="uploadDrivierFn"
              >
                未上传驾驶证
              </a-button>
              <a-button
                size="mini"
                type="primary"
                v-if="
                  memberInfoDto &&
                  (!memberInfoDto?.idCardFrontFileId || (memberInfoDto.cardType == 0 && !memberInfoDto?.idCardReverseFileId))
                "
                @click="uploadIdCardFn"
              >
                未上传身份证明
              </a-button>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="证件类型">{{ memberInfoDto?.cardTypeName }}</a-descriptions-item>
          <a-descriptions-item label="证件号">{{ memberInfoDto?.cardNumber }}</a-descriptions-item>
          <a-descriptions-item label="证件住址">{{ memberInfoDto?.cardAddress }}</a-descriptions-item>
          <a-descriptions-item label="紧急联系人">{{ memberInfoDto?.emergencyContactName }}</a-descriptions-item>
          <a-descriptions-item label="紧急联系人手机号">{{ memberInfoDto?.emergencyContactPhone }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="租赁信息" toggle>
    <template #title>
      <span style="margin-right: 10px">租赁信息</span>
      <tag type="primary">{{ orderDetails.orderStatusName }}</tag>
    </template>
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="自有订单号">{{ orderDetails.orderCode }}</a-descriptions-item>
          <a-descriptions-item label="订单来源">{{ orderDetails.orderSourceName }}</a-descriptions-item>
          <a-descriptions-item label="订单渠道">{{ orderDetails.channelTypeName }}</a-descriptions-item>
          <!-- 渠道订单展示渠道单号 -->
          <a-descriptions-item label="渠道单号" v-if="orderDetails.orderSource == 2">
            {{ orderDetails.channelOrderCode }}
          </a-descriptions-item>
          <a-descriptions-item label="运营主体">{{ orderDetails.accountSubject }}</a-descriptions-item>
          <a-descriptions-item label="订单获取方式">{{ orderDetails.orderAcquisitionTypeName }}</a-descriptions-item>
          <a-descriptions-item label="预计租赁周期">
            {{ orderDetails.startTime || '-' }}至{{ orderDetails.endTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="预计租期">{{ orderDetails.rentDays }}</a-descriptions-item>
          <a-descriptions-item label="实际租期">{{ orderDetails.rentActiveDays }}</a-descriptions-item>
          <a-descriptions-item label="下单车型">{{ orderDetails.originalModelName }}</a-descriptions-item>
          <a-descriptions-item label="取车门店">{{ orderDetails.siteName }}</a-descriptions-item>
          <a-descriptions-item label="上门送车地址">{{ orderDetails.address }}</a-descriptions-item>
          <a-descriptions-item label="还车门店">{{ orderDetails.returnSiteName }}</a-descriptions-item>
          <a-descriptions-item label="上门取车地址">{{ orderDetails.returnAddress }}</a-descriptions-item>
          <a-descriptions-item label="车辆来源">{{ orderDetails.carSourceName }}</a-descriptions-item>
          <a-descriptions-item label="车牌号">
            {{ orderDetails.carLicenseNo }}
            <a-tag color="red" v-if="orderDetails.orderCarLabel">{{ orderDetails.orderCarLabel }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="交车车型">{{ orderDetails.carModelName }}</a-descriptions-item>
          <a-descriptions-item label="实际租赁周期">
            {{ orderDetails.actualStartTime || '-' }}至{{ orderDetails.actualEndTime || '-' }}
          </a-descriptions-item>
          <!-- 取消状态 -->
          <a-descriptions-item label="取消时间" v-if="orderDetails.orderStatus == -100">
            {{ orderDetails.cancelTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="超时时长">{{ orderDetails.overTimeStr }}</a-descriptions-item>
          <a-descriptions-item label="订单备注">{{ orderDetails.remark }}</a-descriptions-item>
        </a-descriptions>
        <!-- 渠道的一些信息 -->
        <a-descriptions :size="'medium'" :align="{ label: 'right' }" v-if="orderDetails.orderSource == 2">
          <a-descriptions-item label="渠道车牌号">{{ orderDetails.channelCarLicenseNo }}</a-descriptions-item>
          <a-descriptions-item label="渠道车型">{{ orderDetails.channelModelName }}</a-descriptions-item>
          <a-descriptions-item label="渠道取车门店">{{ orderDetails.channelSiteName }}</a-descriptions-item>
          <a-descriptions-item label="渠道还车门店">{{ orderDetails.channelReturnSiteName }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <!-- </card> -->
  <!-- 上传驾驶证照片 -->
  <upload-driver-license-modal ref="uploadDriverLicenseModalRef" @ok="uploadSuccessFn" />

  <!-- 上传身份证明照片 -->
  <upload-id-card-modal ref="uploadIdCardModalRef" @ok="uploadIdCardSuccessFn" />
</template>

<script setup name="ShortOrderDetail">
  import uploadDriverLicenseModal from '../../components/upload-driver-license-modal.vue'
  import uploadIdCardModal from '../../components/upload-id-card-modal.vue'
  import { onMounted, ref } from 'vue'
  import { getShortOrdrDetails } from '@/api/order/sOrder'

  const props = defineProps({
    orderId: Number,
  })
  const orderDetails = ref({})
  const memberInfoDto = ref({})
  const getDetails = () => {
    getShortOrdrDetails({ id: props.orderId }).then((res) => {
      orderDetails.value = res.result.orderInfo
      memberInfoDto.value = res.result.memberInfoDto
      console.log(orderDetails.value)
    })
  }
  // 上传驾驶证
  const uploadDriverLicenseModalRef = ref()
  const uploadDrivierFn = () => {
    uploadDriverLicenseModalRef.value.open(
      orderDetails.value.memberId,
      memberInfoDto?.value.driverFrontFileId,
      memberInfoDto?.value.driverReverseFileId
    )
  }
  // 上传完成
  // 更新驾驶证正反面信息
  const uploadSuccessFn = (info) => {
    memberInfoDto.value.driverFrontFileId = info.driverFrontFileId
    memberInfoDto.value.driverReverseFileId = info.driverReverseFileId
  }
  // 上传身份证明
  const uploadIdCardModalRef = ref()
  const uploadIdCardFn = () => {
    uploadIdCardModalRef.value.open(
      orderDetails.value.memberId,
      memberInfoDto?.value.cardType,
      memberInfoDto?.value.idCardFrontFileId,
      memberInfoDto?.value.idCardReverseFileId
    )
  }
  // 上传完成
  // 更新身份证明正反面信息
  const uploadIdCardSuccessFn = (info) => {
    memberInfoDto.value.idCardFrontFileId = info.idCardFrontFileId
    memberInfoDto.value.idCardReverseFileId = info.idCardReverseFileId
  }
  onMounted(() => {
    getDetails()
  })
</script>

<style lang="less" scoped>
  .member-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    .no-card {
      background: #1890ff;
      color: #fff;
      font-size: 14px;
      border-radius: 2px;
      padding: 2px 8px;
    }
  }
</style>
